<!--
 * @Author: wangming
 * @Date: 2021-04-23 15:04:16
 * @LastEditors: wangming
 * @LastEditTime: 2021-04-26 19:22:23
 * @Description: file content
-->
<template>
  <div class="br">
    <div
      @click="checkNav(i)"
      class="leftrow f14 ks-row-middle-center poi sz"
      v-for="(i, index) in list"
      :key="index"
      :class="{ active: i.value === value }"
    >
      <el-badge :value="i.length || ''">
        {{ i.label }}
      </el-badge>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    checkNav(i) {
      this.$emit("input", i.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.leftrow {
  height: 40px;
  color: #1f2329;
  padding-left: 4px;
  border-bottom: 1px solid #f1f1f1;
  &:not(.active):hover {
    background: linear-gradient(270deg, #fff, #e1ecff);
    color: #224585;
  }
}
.active {
  background-color: #e1eaff;
  border-left: 4px solid #224585;
  color: #224585;
  padding-left: 0;
}
.br {
  border-right: 1px solid #f1f1f1;
}

.ks-row-middle-center .el-badge ::v-deep .el-badge__content.is-fixed {
  top: 7px;
  right: 0px;
}
</style>
